<template>
  <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    title="订单详情"
    placeholder
    fixed
  />
  <!-- <div>
    <span>收货人：{{ orderData.receiver }}</span>
    <br />
    <span>收货地址：{{ orderData.address }}</span>
    <br />
    <span>总价：{{ orderData.price }}</span>
  </div> -->
  <van-card currency="" :price="'总价：￥' + orderData.price">
    <template #title>
      <div class="receiver">
        <van-icon name="user-circle-o" color="#1989fa" size="30" />
        <span class="receiver-text">收件人：{{ orderData.receiver }}</span>
      </div>
    </template>

    <template #desc>
      <div class="address">
        <van-icon name="logistics" color="#04BE02" size="30" />
        <span>收货地址： {{ orderData.address }}</span>
      </div>
    </template>
  </van-card>
  <van-card
    v-for="item in orderData.details"
    :key="item.id"
    :price="item.price"
    :desc="item.product.desc"
    :title="item.product.name"
    :thumb="item.product.coverImage"
    :num="item.amount"
  >
  </van-card>
</template>

<script setup>
import { getOrderDetailsReq } from '@/api/order'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
let round = useRoute()
let id = round.query.id
let orderData = ref({})
function getOrderDetail() {
  getOrderDetailsReq(id).then((res) => {
    console.log('订单详情信息：', res.data)
    orderData.value = res.data.data
  })
}
getOrderDetail()
</script>

<style scoped lang="scss">
.receiver,.address{
  display: flex;
  align-items:center ;
  margin: auto;
  span{
    margin-left:10px ;
  }
  .receiver-text{
    font-size: large;
    font-weight: bold;
  }
}
</style>
